import React, {useState, useEffect} from 'react';
import { Link } from'react-router-dom';
import ConfirmDialog from './ConfirmDialog';

interface IProps {
    currentTab: string;
    tabsList: {
        key: string;
        name: string;
    }[];
    switchTabHandle: (tabKey: string) => void;
    clearCompletedTodoItem: () => void;
    counts: {
        totalCount: number;
        pendingCount: number;
        completedCount: number;
    };
}

const MainFooter: React.FC<IProps> = ({ currentTab, tabsList, switchTabHandle, clearCompletedTodoItem, counts }) => {
    const [showDeleteCompletedConfirm, setShowDeleteCompletedConfirm] = useState(false);

    useEffect(() => {
        console.warn("MainFooter生命周期：constructor");
    }, []);

    useEffect(() => {
        console.warn("MainFooter生命周期：mount");
        return () => {
            console.warn("MainFooter生命周期：unmount");
        };
    }, []);

    useEffect(() => {
        console.warn("MainFooter生命周期：update");
    });

    /**
     * 底部tab切换
     * @param tabKey
     */
    const handleTabClick = (tabKey: string) => {
        switchTabHandle(tabKey); // 调用回调函数
    };

    /**
     * 点击清除完成项按钮事件
     */
    const handleClearCompletedClick = () => {
        // 只有在全部或已完成选项卡中有已完成数据时，才显示确认对话框
        if (counts.completedCount > 0 && (currentTab === 'all' || currentTab === 'completed')) {
            setShowDeleteCompletedConfirm(true); // 设置状态以显示确认对话框
        }
    };

    /**
     * 确认清除完成项
     */
    const handleConfirmClear = () => {
        // 清除执行
        clearCompletedTodoItem();
        console.log("清除已完成任务项");
        setShowDeleteCompletedConfirm(false); // 关闭确认对话框
    };

    /**
     * 取消清除完成项
     */
    const handleCancelClear = () => {
        setShowDeleteCompletedConfirm(false); // 关闭确认对话框
    };

    return (
        <div className="main-footer">
            <div className="inner-left">
                <span>共<strong>{counts.totalCount}</strong>条数据 / （<strong>{counts.pendingCount}</strong>条待完成 | <strong>{counts.completedCount}</strong>条已完成）</span>
            </div>
            <div className="inner-center">
                <ul className="tabs">
                    {tabsList.map((item, index) => (
                        <li
                            className={currentTab === item.key ? 'item active' : 'item'}
                            key={item.key}
                            onClick={() => handleTabClick(item.key)}
                        >
                            <Link to={`/${item.key}`}
                                  className={currentTab === item.key ? 'active' : ''}>{item.name}</Link>
                        </li>
                    ))}
                </ul>
            </div>
            <div className="inner-right">
            <button
                    className="clear-completed"
                    onClick={handleClearCompletedClick}
                    disabled={!(counts.completedCount > 0 && (currentTab === 'all' || currentTab === 'completed'))}
                >
                    清除完成项
                </button>
                {showDeleteCompletedConfirm && ( // 显示删除确认对话框
                    <ConfirmDialog
                        isOpen={showDeleteCompletedConfirm}
                        title="确认清除?"
                        message="确定要清除所有已完成的任务项吗？"
                        onConfirm={handleConfirmClear}
                        onCancel={handleCancelClear}
                    />
                )}
            </div>
        </div>
    );
}

export default MainFooter;